<template>
  <div class="section-wrap" style="height:100%;">
    <!-- 头部 -->
     <div class="headerBox">
    <div class="header">
      <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>
      考核计划详情
    </div>
    </div>
    <div class="form-section" style="margin-top: 40px;">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>被考核单位</label>
        </div>
        <div class="input_div">
          <input type="text" class="hiddenWord"
                 :disabled="isDisabled"
                 v-model="info.beDepartName">
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>被考核单位负责人</label>
        </div>
        <div class="input_div">
          <input type="text" class="hiddenWord"
                 v-model="info.charge"
                 :disabled="isDisabled">
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>考核表名称</label>
        </div>
        <!-- <group>
            <datetime v-model="endTime"></datetime>
        </group> -->
        <div class="input_div">
          <input type="text"
                 v-model="info.classifyTwoName"
                 :disabled="isDisabled">
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>量化考核时间</label>
        </div>
        <div class="input_div">
          <input type="text"
                 v-model="info.checkDate.substring(0, 10)"
                 :disabled="isDisabled">
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>考核组长</label>
        </div>
        <div class="input_div">
          <input type="text"
                 v-model="info.checkGroupLeaderName"
                 :disabled="isDisabled">
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>抄送接收人</label>
        </div>
        <div class="input_div">
          <input type="text"
                 v-model="info.receivrtName"
                 :disabled="isDisabled">
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>考核编号</label>
        </div>
        <div class="input_div">
          <input type="text"
                 placeholder="年月日+流水号，自动生成"
                 v-model="info.checkNo"
                 :disabled="isDisabled">
        </div>
      </div>
      <div class="info_div3">
        <p>考核分工</p>
      </div>
      <div class="member_div">
        <ul class="member_list">
          <!--    <li v-for="(list,index) in lis" v-bind:key="list.id">
                <div class="form-item form-item-style1">
                  <div class="label-title">
                    <label>成员：</label>
                  </div>
                  <div class="input_div">
                    <input type="text" class="member1"
                           placeholder="请选择"
                           v-model="list.divisionProsonName"
                           :disabled="isDisabled">
                    <x-icon type="ios-arrow-right" size="22" class="icon-right"
                            @click="getCompany(3,index)"></x-icon>
                  </div>
                </div>
                <div class="form-item form-item-style1" style="border-bottom: none;">
                  <div class="label-title">
                    <label>分工（考核项）：</label>
                  </div>
                  <div class="input_div">
                    <input type="text"
                           placeholder="请选择"
                           v-model="list.standardNameList"
                           :disabled="isDisabled">
                    <x-icon type="ios-arrow-right" size="22" class="icon-right"
                            @click="getDivision(index)"></x-icon>
                  </div>
                </div>
              </li>-->
          <li v-for="(item,index) in lis" :key="index">
            <div class="member-item">
              <label>成员1</label>
              <span>{{item.divisionProsonName}}</span>
            </div>
            <div class="member-item" @click="getDivision(index)">
              <!-- <label>分工（考核项）</label>
               <span style="width:230px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden">{{item.standardNameList}}</span>-->
              <input type="text"
                     style="background-color: #fff;"
                     placeholder="请选择"
                     v-model="item.standardNameList"
                     :disabled="isDisabled">
              <x-icon type="ios-arrow-right" size="22" class="icon-right"
                      ></x-icon>
            </div>
          </li>
        </ul>
      </div>
      <div>
        <div class="info_div3">
          <p>计划审批</p>
        </div>
        <div class="form-item form-item-style1" style="border-top: 1px solid #ebeef2">
          <div class="label-title">
            <label>审批结果</label>
          </div>
          <div class="input_div">
            <span class="radio_span" v-bind:class="{active:info.approvalResult=='1'}">通过</span>
            <span class="radio_span" v-bind:class="{active:info.approvalResult!='1'}">不通过</span>
          </div>
        </div>
        <div class="form-item form-item-style1" style="border-bottom: none">
          <div class="label-title">
            <label>审批意见</label>
          </div>
        </div>
        <div class="area_div">
          <textarea placeholder="" v-model="info.approvalRemark " readonly></textarea>
        </div>
        <div class="form-item form-item-style1">
          <div class="label-title">
            <label class="space1">审批人</label>
          </div>
          <div class="input_div">
            <input type="text" v-model="info.approver" :disabled="isDisabled">
          </div>
        </div>
        <div class="form-item form-item-style1">
          <div class="label-title">
            <label>审批时间</label>
          </div>
          <div class="input_div">
            <input type="text"
                   v-model="info.approvalDate"
                   :disabled="isDisabled">
          </div>
        </div>
      </div>
      <!--<div class="btns_div">
           <a class="submitBtn">提 交</a>
           <a class="cancelBtn">取 消</a>
       </div>-->
    </div>
    <div v-transfer-dom>
      <popup v-model="classValue2" width="100%">
        <div style="background: white">
          <el-tree
            :data="dataList"
            show-checkbox
            node-key="id"
            :default-checked-keys='checkedList'
            ref="tree"
            :props="def"
          ></el-tree>
          <div style="text-align:  center;margin-top: 10px;padding-bottom: 5px">
            <el-button size="mini" @click="classValue2=false">取消</el-button>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template>
<script>
  import formatDate from "../../utils/formatDate";
  import {XHeader, Tabbar, TabbarItem, Group, Cell, TransferDom, Popup} from 'vux'
  import LoadMore from "vux/src/components/load-more/index";
  import VueBetterScroll from "vue2-better-scroll"

  export default {
    data() {
      return {
        scrollbarObj: {fade: true},
        pullDownRefreshObj: false,
        pullUpLoadObj: {
          threshold: 0,
          txt: {
            more: "加载更多",
            noMore: "没有更多数据了"
          }
        },
        startY: 20,
        scrollToX: 0,
        scrollToY: 0,
        scrollToTime: 700,
        isDisabled: true, // 是否禁止输入
        iin: false,
        iino: true,
        checkedList: [],
        lis: [{checkedList: [],}],
        classValue2: false,
        def: {
          children: 'children',
          label: "quantizeName",
        },
        dataList: [],
        params: {
          id: [],
          planId: "",
          startDate: "",
          endDate: "",
          checkDepartId: "",
          rocordNotPlan: 0,
          status: 0,
          skipCount: 0,
          maxResultCount: 1

        },
        info: {
          createUser: -1,
          createDate: "",
          operUser: -1,
          operDate: "",
          checkDepartId: '',
          checkDepartName: '',
          charge: '',
          classifyOneId: '',
          classifyOneName: '',
          classifyTwoId: '',
          classifyTwoName: '',
          checkDate: '',
          checkGroupLeaderId: '',
          checkGroupLeaderName: '',
          receiverId: '',
          receivrtName: '',
          checkNo: '',
          status: 0,
          approvalResult: '0',
          approvalRemark: '',
          approver: '',
          approverId: '',
          approvalDate: null,
          rocordId: '',
          rocordNotPlan: 0,
          rocordStatus: 0,
          checkScore: 0,
          deleteTag: 0,
          deleteUser: '',
          deleteDate: null,
          beDepartId: '',
          beDepartName: '',
          divisionList: [],
          allowApproval: false,
          id: null
        }
      };
    },
    components: {
      Popup,
      VueBetterScroll
    },
    directives: {
      TransferDom
    },
    created() {
      this.info.approvalDate = this.getdatanew();
      this.getInfo();

    },
    methods: {
      getInfo() {
        this.params.planId = this.$route.query.planId; //id
        this.$axiosAjax.getPalnInfo({planId: this.$route.query.planId})
          .then(res => {
            if (res.data.success == true) {
              this.info = res.data.result;
              //  this.info.divisionList = res.data.result.divisionList;
              if (this.info.divisionList != null && this.info.divisionList.length > 0) {
                this.lis = []
                this.info.divisionList.forEach((item, i) => {
                  this.lis.push(item)
                  let types = item.standardIdList.split(',')
                  this.lis[i].checkedList = types
                  console.log(this.lis)
                  console.log(item)
                })
              }
            }
          })
          .catch(err => {
          });
      },
      goBack() {
        this.$router.go(-1);
      },
      getCheck() {
        this.iin = true;
        this.iino = false;
      },
      getCheckno() {
        this.iin = false;
        this.iino = true;
      },
      getdatanew() {
        var date = new Date();
        var seperator1 = '-';
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
      },
      getDivision(index) {
        if (this.lis[index].checkedList != null && this.lis[index].checkedList.length > 0) {
          this.checkedList = this.lis[index].checkedList
        } else {
          this.checkedList = []
        }
        this.index = index
        this.classValue2 = true;
        this.$axiosAjax.getDivision({classifyId: this.info.classifyTwoId}).then((res) => {
          if (res.data.success == true) {
            this.dataList = res.data.result
          }
        }).catch(
          (err) => {

          }
        )
      }
      ,
    }
  }
  ;
</script>
<style lang="less" scoped>
  .area_div {
    border-bottom: 1px solid #ebeef2;
    margin-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    textarea {
      border: none;
      resize: none;
      width: 100%;
      font-size: 14px;
      outline: none;
      height: 50px;
    }
  }

  .space1 {
    letter-spacing: 7px;
  }

  .form-item {
    .input_div {
      > span.radio_span {
        font-size: 14px;
        color: #666;
        background-image: url("/static/images/radio_not.png");
        background-position: left center;
        background-repeat: no-repeat;
        background-size: 17px 17px;
        padding: 2px 0 2px 20px;
        margin-left: 30px;
      }
      .radio_span.active {
        background-image: url("/static/images/radio_yes.png");
      }
      > span:first-child {
        margin-left: 0;
      }
      .vux-x-icon {
        fill: #999;
        float: right;
        margin-top: 17px;
      }
    }
  }

  .info_div3 {
    height: 55px;
    line-height: 45px;
    padding: 0 20px;
    border-top: 10px solid #ebeef2;
    p {
      float: left;
      color: #469b7a;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .member_div {
    .member_list {
      padding-left: 20px;
      li {
        border-top: 1px solid #ebeef2;
        height: 84px;
        line-height: 30px;
        padding-top: 11px;
        .member-item {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          padding-right: 20px;
          > label {
            font-weight: bold;
          }
        }
      }
      .member1 {
        color: #ff0000;
      }
      .member2 {
        color: #15bd84;
      }
    }
  }

  .btns_div {
    background: #ebeef2;
    padding: 30px 20px 55px;
    justify-content: space-between;
    display: flex;
    a {
      height: 40px;
      border-radius: 20px;
      display: inline-block;
      width: 140px;
      text-align: center;
      line-height: 40px;
      color: #fff;
    }
    .submitBtn {
      background: #469b7a;
    }
    .cancelBtn {
      background: #ffb400;
    }
  }

  .addPlan_select {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    z-index: 10;
    .planSel_list {
      width: 60%;
      margin: 0 auto;
      padding-top: 150px;
      li {
        border-radius: 10px;
        height: 57px;
        line-height: 57px;
        text-align: center;
        background: #fff;
        margin-bottom: 6px;
        color: #469b7a;
        font-size: 16px;
      }
    }
  }
</style>
